﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Expenses.Views.ChargePage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Expenses.Views"
    xmlns:common="using:Expenses.Common"
    xmlns:controls="using:Expenses.Controls"
    xmlns:converters="using:Expenses.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Styles/ExpensesStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <converters:DoubleToCurrencyStringConverter2 x:Key="DoubleToCurrencyStringConverter2"/>
            <converters:BooleanToStringConverter x:Key="BooleanToStringConverter"/>
            <converters:ExpenseTypeToStringConverter x:Key="ExpenseTypeToStringConverter"/>
        </ResourceDictionary>
    </Page.Resources>

    <Page.BottomAppBar>
        <AppBar x:Name="ChargePageAppBar"
                Background="{StaticResource ItemTemplateBackgroundColor}">
            <StackPanel Orientation="Horizontal" 
                        HorizontalAlignment="Right" 
                        VerticalAlignment="Top">
                <Button x:Name="SaveChargeButton" 
                        Style="{StaticResource SaveChargeAppBarButtonStyle}" 
                        Loaded="StartLayoutUpdates"
                        Unloaded="StopLayoutUpdates"
                        Click="SaveChargeButton_Click"/>
                <Button x:Name="DeleteChargeButton" 
                        Style="{StaticResource DeleteChargeAppBarButtonStyle}" 
                        Loaded="StartLayoutUpdates"
                        Unloaded="StopLayoutUpdates"
                        Click="DeleteChargeButton_Click"
                        Visibility="Collapsed"/>
            </StackPanel>
        </AppBar>
    </Page.BottomAppBar>

    <Grid x:Name="LayoutRoot" 
          Background="{StaticResource AppBackgroundColor}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Border Background="{StaticResource ItemTemplateBackgroundColor}">
                <Button x:Name="BackButton" 
                        Click="BackButton_Click" 
                        Style="{StaticResource BackButtonStyle}"/>
            </Border>
            <Border Background="{StaticResource ItemTemplateBackgroundColor}"
                    Grid.Column="1" >
                <TextBlock x:Name="PageTitleTextBlock" 
                           Text="Charge detail"
                           Style="{StaticResource PageHeaderTextStyle}"
                           TextWrapping="Wrap"
                           FontSize="44"/>
            </Border>
        </Grid>

        <ScrollViewer x:Name="ItemListScrollViewer"
                      AutomationProperties.AutomationId="ItemListScrollViewer"
                      Grid.Row="1" 
                      Style="{StaticResource VerticalScrollViewerStyle}">

            <StackPanel x:Name="ChargePageStackPanel"
                        Orientation="Horizontal"
                        Margin="120,10,0,0">
                <StackPanel x:Name="DetailStackPanel1"
                            Orientation="Vertical">
                    <TextBlock Text="Expense Date" 
                               Margin="0,15,0,0"
                               HorizontalAlignment="Left"
                               Style="{StaticResource AppTextBlockStyle}"/>
                    <controls:DatePicker x:Name="ExpenseDatePicker" 
                                        Margin="0,15,0,5"
                                        HorizontalAlignment="Left"
                                        LostFocus="ExpenseDatePicker_LostFocus"
                                        Visibility="Collapsed"/>
                    <controls:SnappedDatePicker x:Name="SnappedExpenseDatePicker" 
                                               Margin="0,15,0,5"
                                               HorizontalAlignment="Left"
                                               LostFocus="SnappedExpenseDatePicker_LostFocus"
                                               Visibility="Collapsed"/>
                    <TextBlock x:Name="ExpenseDateTextBlock" 
                               Style="{StaticResource AppTitleTextStyle}"
                               Margin="0,15,0,5"
                               HorizontalAlignment="Left"
                               Visibility="Collapsed"/>

                    <TextBlock x:Name="MerchantErrorTextBlock"  
                               Text="Enter a merchant."
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTitleTextStyle}"
                               Foreground="Red"
                               Visibility="Collapsed"/>
                    <TextBlock Text="Merchant" 
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTextBlockStyle}"/>
                    <TextBox x:Name="MerchantTextBox" 
                             Text="{Binding Merchant, Mode=TwoWay}" 
                             Width="400" 
                             Margin="0,15,0,5"
                             HorizontalAlignment="Left"
                             VerticalContentAlignment="Center"
                             BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                             LostFocus="MerchantTextBox_LostFocus"
                             Visibility="Collapsed"/>
                    <TextBlock x:Name="MerchantTextBlock" 
                               Text="{Binding Merchant}" 
                               Style="{StaticResource AppTitleTextStyle}"
                               Margin="0,15,0,5"
                               HorizontalAlignment="Left"
                               Visibility="Collapsed"/>
                    
                    <TextBlock Text="Location" 
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTextBlockStyle}"/>
                    <TextBox x:Name="LocationTextBox" 
                             Text="{Binding Location, Mode=TwoWay}" 
                             Width="400" 
                             Margin="0,15,0,5"
                             HorizontalAlignment="Left"
                             VerticalContentAlignment="Center"
                             BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                             Visibility="Collapsed"/>
                    <TextBlock x:Name="LocationTextBlock" 
                               Text="{Binding Location}" 
                               Style="{StaticResource AppTitleTextStyle}"
                               Margin="0,15,0,5"
                               HorizontalAlignment="Left"
                               Visibility="Collapsed"/>

                    <TextBlock x:Name="BilledAmountErrorTextBlock"  
                               Text="Enter the amount you paid."
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTitleTextStyle}"
                               Foreground="Red"
                               Visibility="Collapsed"/>
                    <TextBlock x:Name="TransactionAmountErrorTextBlock"  
                               Text="Enter the amount you paid in $."
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTitleTextStyle}"
                               Foreground="Red"
                               Visibility="Collapsed"/>
                    <StackPanel Orientation="Horizontal"
                                Margin="0,15,0,0">
                        <TextBlock Text="Billed Amount" 
                                   HorizontalAlignment="Left"
                                   Style="{StaticResource AppTextBlockStyle}"/>
                        <TextBlock Text="Transaction Amount" 
                                   Margin="60,0,0,0"
                                   HorizontalAlignment="Left"
                                   Style="{StaticResource AppTextBlockStyle}"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal"
                                Margin="0,15,0,5">
                        <TextBox x:Name="BilledAmountTextBox" 
                                 Text="{Binding BilledAmount, Mode=TwoWay, Converter={StaticResource DoubleToCurrencyStringConverter2}}"  
                                 Width="125" 
                                 HorizontalAlignment="Left"
                                 VerticalContentAlignment="Center"
                                 BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                                 GotFocus="BilledAmountTextBox_GotFocus"
                                 LostFocus="BilledAmountTextBox_LostFocus"
                                 Visibility="Collapsed"/>
                        <TextBlock x:Name="BilledAmountTextBlock" 
                               Text="{Binding BilledAmount, Converter={StaticResource DoubleToCurrencyStringConverter2}}" 
                               Style="{StaticResource AppTitleTextStyle}"
                               Margin="0,0,0,5"
                               HorizontalAlignment="Left"
                               Visibility="Collapsed"/>
                        <TextBox x:Name="TransactionAmountTextBox" 
                                 Text="{Binding TransactionAmount, Mode=TwoWay, Converter={StaticResource DoubleToCurrencyStringConverter2}}"  
                                 Width="125" 
                                 Margin="40,0,0,0"
                                 HorizontalAlignment="Left"
                                 VerticalContentAlignment="Center"
                                 BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                                 GotFocus="TransactionAmountTextBox_GotFocus"
                                 LostFocus="TransactionAmountTextBox_LostFocus"
                                 Visibility="Collapsed"/>
                        <TextBlock x:Name="TransactionAmountTextBlock" 
                               Text="{Binding TransactionAmount, Converter={StaticResource DoubleToCurrencyStringConverter2}}" 
                               Style="{StaticResource AppTitleTextStyle}"
                               Margin="110,0,0,5"
                               HorizontalAlignment="Left"
                               Visibility="Collapsed"/>
                    </StackPanel>
                    
                    <StackPanel>
                        <TextBlock Text="Notes" 
                                   HorizontalAlignment="Left"
                                   Margin="0,15,0,0"
                                   Style="{StaticResource AppTextBlockStyle}"/>
                        <TextBox x:Name="NotesTextBox" 
                                 Text="{Binding Notes, Mode=TwoWay}" 
                                 Width="400" 
                                 Height="100"
                                 TextWrapping="Wrap"
                                 Margin="0,15,0,5"
                                 HorizontalAlignment="Left"
                                 VerticalContentAlignment="Center"
                                 BorderBrush="{StaticResource ItemTemplateBackgroundColor}"/>
                    </StackPanel>
                </StackPanel>
                
                <StackPanel x:Name="DetailStackPanel2"
                            Orientation="Vertical"
                            Margin="60,0,0,0">
                    <TextBlock x:Name="DescriptionErrorTextBlock"  
                               Text="Enter a description."
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTitleTextStyle}"
                               Foreground="Red"
                               Visibility="Collapsed"/>
                    <TextBlock Text="Description" 
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTextBlockStyle}"/>
                    <TextBox x:Name="DescriptionTextBox" 
                             Text="{Binding Description, Mode=TwoWay}" 
                             Width="400" 
                             Height="25"
                             TextWrapping="Wrap"
                             Margin="0,15,0,5"
                             HorizontalAlignment="Left"
                             VerticalContentAlignment="Center"
                             BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                             LostFocus="DescriptionTextBox_LostFocus"/>
                    
                    <TextBlock x:Name="CategoryErrorTextBlock"  
                               Text="Enter a category."
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTitleTextStyle}"
                               Foreground="Red"
                               Visibility="Collapsed"/>
                    <TextBlock Text="Category" 
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTextBlockStyle}"/>
                    <ComboBox x:Name="CategoriesComboBox" 
                              HorizontalAlignment="Left" 
                              VerticalAlignment="Center" 
                              Margin="0,15,0,5"
                              Width="400"
                              BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                              SelectionChanged="CategoriesComboBox_SelectionChanged"/>
                    
                    <TextBlock x:Name="OtherCategoryErrorTextBlock"  
                               Text="Enter a second category."
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTitleTextStyle}"
                               Foreground="Red"
                               Visibility="Collapsed"/>
                    <TextBlock Text="Other Category" 
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTextBlockStyle}"/>
                    <ComboBox x:Name="OtherCategoriesComboBox" 
                              HorizontalAlignment="Left" 
                              VerticalAlignment="Center" 
                              Margin="0,15,0,5"
                              Width="400"
                              BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                              IsEnabled="false"  
                              SelectionChanged="OtherCategoriesComboBox_SelectionChanged"/>
                    
                    <StackPanel Orientation="Horizontal"
                                Margin="0,15,0,5">
                        <TextBlock Text="Receipt Required?" 
                                   VerticalAlignment="Top"
                                   Style="{StaticResource AppTextBlockStyle}"/>
                        <TextBlock Text="{Binding ReceiptRequired, Mode=TwoWay, Converter={StaticResource BooleanToStringConverter}}"  
                                   Margin="15,0,0,0"
                                   Style="{StaticResource AppTitleTextStyle}"/>
                    </StackPanel>
                    <TextBlock x:Name="ExpenseTypeTextBlock"
                               Text="{Binding ExpenseType, Converter={StaticResource ExpenseTypeToStringConverter}}" 
                               Margin="0,15,0,15"
                               HorizontalAlignment="Left"
                               Style="{StaticResource AppTextBlockStyle}"/>
                </StackPanel>
            </StackPanel>

        </ScrollViewer>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChargePageStackPanel" 
                                                       Storyboard.TargetProperty="Orientation">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Vertical"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChargePageStackPanel" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="100,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DetailStackPanel2" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="0,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitleTextBlock" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitleTextBlock" 
                                                       Storyboard.TargetProperty="FontSize">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="20"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitleTextBlock" 
                                                       Storyboard.TargetProperty="FontWeight">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="SemiBold"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChargePageStackPanel" 
                                                       Storyboard.TargetProperty="Orientation">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Vertical"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChargePageStackPanel" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="15,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DetailStackPanel2" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="0,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseDatePicker" 
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnappedExpenseDatePicker" 
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MerchantTextBox" 
                                                       Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="285"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LocationTextBox" 
                                                       Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="285"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TransactionAmountTextBlock" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="100,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BilledAmountTextBox" 
                                                       Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="100"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TransactionAmountTextBox" 
                                                       Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="100"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TransactionAmountTextBox" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="35,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NotesTextBox" 
                                                       Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="285"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DescriptionTextBox" 
                                                       Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="285"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CategoriesComboBox" 
                                                       Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="285"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OtherCategoriesComboBox" 
                                                       Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="285"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
